<template>
  <div id="dashborad"  style="height: 98%;overflow: auto;">
    <el-row :gutter="5" style="margin-top: 5px; margin-right: 5px; margin-left: 5px;">
      <el-col :span="4">
        <el-card class="box-card">
          <template #header>
            <div class="card-header" style="height: 10px">
                <span style="font-size: 15px; position: absolute; top: 15px;">机房数量</span>
            </div>
          </template>
          <div>
            <el-progress type="circle" :percentage="100" status="success" width="40"/>
            <el-text class="number" type="info" style="cursor:pointer;" @click="this.$router.push('/host/idc')">{{ idc_number }}</el-text>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="box-card">
          <template #header>
            <div class="card-header" style="height: 10px">
              <span style="font-size: 15px; position: absolute; top: 15px;">服务器数量</span>
            </div>
          </template>
          <div>
            <el-progress type="circle" :percentage="100" status="success" width="40"/>
            <el-text class="number" type="info" style="cursor:pointer;" @click="this.$router.push('/host/server')">{{ server_number }}</el-text>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="box-card">
          <template #header>
            <div class="card-header" style="height: 10px">
              <span style="font-size: 15px; position: absolute; top: 15px;">项目数量</span>
            </div>
          </template>
          <div>
            <el-progress type="circle" :percentage="100" status="success" width="40"/>
            <el-text class="number" type="info" style="cursor:pointer;" @click="this.$router.push('/release/project')">{{ project_number }}</el-text>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="box-card">
          <template #header>
            <div class="card-header" style="height: 10px">
              <span style="font-size: 15px; position: absolute; top: 15px;">应用数量</span>
            </div>
          </template>
          <div>
            <el-progress type="circle" :percentage="100" status="success" width="40"/>
            <el-text class="number" type="info" style="cursor:pointer;" @click="this.$router.push('/release/app')">{{ app_number }}</el-text>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="box-card">
          <template #header>
            <div class="card-header" style="height: 10px">
              <span style="font-size: 15px; position: absolute; top: 15px;">任务数量</span>
            </div>
          </template>
          <div>
            <el-progress type="circle" :percentage="100" status="success" width="40"/>
            <el-text class="number" type="info" style="cursor:pointer;" @click="this.$router.push('/task/cron')">{{ task_number }}</el-text>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="box-card">
          <template #header>
            <div class="card-header" style="height: 10px">
              <span style="font-size: 15px; position: absolute; top: 15px;">用户数量</span>
            </div>
          </template>
          <div>
            <el-progress type="circle" :percentage="100" status="success" width="40"/>
            <el-text class="number" type="info" style="cursor:pointer;" @click="this.$router.push('/usermanage/user')">{{ user_number }}</el-text>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card class="box-card" style="margin-top: 5px; margin-right: 5px; margin-left: 5px;width: auto;">
        <template #header>
          <div class="card-header" style="height: auto;">
            <span style="font-size: 15px;" >最近一周访问量统计</span>
          </div>
        </template>
        <div id="visitChart" style="width: 100%; height: 280px;"></div>
  </el-card>
    <el-card class="box-card" style="margin-top: 5px; margin-right: 5px; margin-left: 5px;width: auto;">
        <template #header>
          <div class="card-header" style="height: auto;">
            <span style="font-size: 15px;" >最近一周批量执行统计</span>
          </div>
        </template>
        <div id="commandChart" style="width: 100%; height: 280px;"></div>
    </el-card>
    <el-card class="box-card" style="margin-top: 5px; margin-right: 5px; margin-left: 5px;width: auto;">
        <template #header>
          <div class="card-header" style="height: auto;">
            <span style="font-size: 15px;" >最近一月应用发布统计</span>
          </div>
        </template>
        <div id="myChart" style="width: 100%; height: 280px;"></div>
  </el-card>
 </div>
  <!--回到顶部按钮，target是绑定产生滚动事件的对象,visibility-height是滚动到一定高度显示-->
 <el-backtop :right="30" :bottom="100" :visibility-height="520" target="#dashborad"></el-backtop>

</template>

<script>
    import * as echarts from 'echarts'
    export default {
        name: "Dashboard",
        data() {
            return {
                idc_number: 0,
                server_number: 0,
                project_number: 0,
                app_number: 0,
                task_number: 0,
                user_number: 0,
                xData: '',
                yFailData: '',
                ySuccessData: '',
                command_xData: '',
                command_yFailData: '',
                command_ySuccessData: '',
                visit_xData: '',
                visit_y_ip_data: '',
                visit_y_pv_data: '',
            }
        },
        mounted() {
            this.getNumber();
            this.visitEchat();
            this.getVisitData();
            this.commandEchat();
            this.releaseEchat();
            this.getCommandData();
            this.getReleaseData();
        },
        methods: {
            getNumber() {
              this.$http.get('/cmdb/idc/')
                  .then(res => {
                      this.idc_number = res.data.count;
                  });
              this.$http.get('/cmdb/server/')
                  .then(res => {
                      this.server_number = res.data.count;
                  });
              this.$http.get('/app_release/project/')
                  .then(res => {
                      this.project_number = res.data.count;
                  });
              this.$http.get('/app_release/app/')
                  .then(res => {
                      this.app_number = res.data.count;
                  });
              this.$http.get('/task/cron/')
                  .then(res => {
                      this.task_number = res.data.count;
                  });
              this.$http.get('/config/user/')
                  .then(res => {
                      this.user_number = res.data.count;
                  });
            },
            releaseEchat(){
              // 基于准备好的dom，初始化echarts实例
              var myChart = echarts.init(document.getElementById('myChart'));
              // 绘制图表
              var option = {
                // title: {
                //   text: '趋势图'
                // },
                tooltip: {
                  trigger: 'axis'
                },
                legend: {
                  data: ['发布失败', '发布成功']
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
                },
                // toolbox: {
                //   feature: {
                //     saveAsImage: {}
                //   }
                // },
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: this.xData
                },
                yAxis: {
                  type: 'value'
                },
                series: [
                  {
                    name: '发布失败',
                    type: 'line',
                    stack: 'Total',
                    // lineStyle: {color: 'red'},
                    itemStyle: {color: 'red'},
                    data: this.yFailData,
                    large: true //开启大数据量优化，在数据特别多而出现图形卡顿时候开启
                  },
                  {
                    name: '发布成功',
                    type: 'line',
                    stack: 'Total',
                    // lineStyle: {color: 'green'},
                    itemStyle: {color: '#91cc75'},
                    data: this.ySuccessData,
                    large: true //开启大数据量优化，在数据特别多而出现图形卡顿时候开启
                  }
                ]
              };
              myChart.setOption(option); // 使用刚指定的配置项和数据显示图表。
            },
            getReleaseData() {
                this.$http.get('/app_release/apply_echart/')
                    .then(res => {
                        if(res.data.code == 200) {
                            this.xData = res.data.data.x_data;
                            this.yFailData = res.data.data.y_fail_data;
                            this.ySuccessData = res.data.data.y_success_data;
                            this.releaseEchat();
                        }
                    });
            },
            commandEchat(){
              // 基于准备好的dom，初始化echarts实例
              var commandChart = echarts.init(document.getElementById('commandChart'));
              // 绘制图表
              var option = {
                // title: {
                //   text: '趋势图'
                // },
                tooltip: {
                  trigger: 'axis'
                },
                legend: {
                  data: ['执行失败', '执行成功']
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
                },
                // toolbox: {
                //   feature: {
                //     saveAsImage: {}
                //   }
                // },
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: this.command_xData
                },
                yAxis: {
                  type: 'value'
                },
                series: [
                  {
                    name: '执行失败',
                    type: 'line',
                    stack: 'Total',
                    // lineStyle: {color: 'red'},
                    itemStyle: {color: 'red'},
                    data: this.command_yFailData,
                    large: true //开启大数据量优化，在数据特别多而出现图形卡顿时候开启
                  },
                  {
                    name: '执行成功',
                    type: 'line',
                    stack: 'Total',
                    // lineStyle: {color: 'green'},
                    itemStyle: {color: '#91cc75'},
                    data: this.command_ySuccessData,
                    large: true //开启大数据量优化，在数据特别多而出现图形卡顿时候开启
                  }
                ]
              };
              commandChart.setOption(option); // 使用刚指定的配置项和数据显示图表。
            },
            getCommandData() {
                this.$http.get('/command_echart/')
                    .then(res => {
                       console.log(res.data,111)
                        if(res.data.code == 200) {
                            this.command_xData = res.data.data.x_data;
                            this.command_yFailData = res.data.data.y_fail_data;
                            this.command_ySuccessData = res.data.data.y_success_data;
                            this.commandEchat();
                        }
                    });
            },
            visitEchat(){
              // 基于准备好的dom，初始化echarts实例
              var visitChart = echarts.init(document.getElementById('visitChart'));
              // 绘制图表
              var option = {
                // title: {
                //   text: '趋势图'
                // },
                tooltip: {
                  trigger: 'axis'
                },
                legend: {
                  data: ['访问ip', '访问pv']
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
                },
                // toolbox: {
                //   feature: {
                //     saveAsImage: {}
                //   }
                // },
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: this.visit_xData
                },
                yAxis: {
                  type: 'value'
                },
                series: [
                  {
                    name: '访问ip',
                    type: 'line',
                    stack: 'Total',
                    itemStyle: {color: '#73c0de'},
                    // lineStyle: {color: '#73c0de'},
                    data: this.visit_y_ip_data,
                    large: true //开启大数据量优化，在数据特别多而出现图形卡顿时候开启
                  },
                  {
                    name: '访问pv',
                    type: 'line',
                    stack: 'Total',
                    itemStyle: {color: '#fc8452'}, // 数据点颜色
                    // lineStyle: {color: '#fc8452'},  // 折线颜色
                    data: this.visit_y_pv_data,
                    large: true //开启大数据量优化，在数据特别多而出现图形卡顿时候开启
                  },
                ]
              };
              visitChart.setOption(option); // 使用刚指定的配置项和数据显示图表。
            },
            getVisitData() {
                this.$http.get('/visit_echart/')
                    .then(res => {
                        if(res.data.code == 200) {
                            this.visit_xData = res.data.data.x_data;
                            this.visit_y_ip_data = res.data.data.y_ip_data;
                            this.visit_y_pv_data = res.data.data.y_pv_data;
                            this.visitEchat();
                        }
                    });
            },
        }
    }
</script>

<style scoped>
    .number {
        margin-left: 30%;
        font-size: 40px;
    }
    .number:hover {
        /* 鼠标悬浮时的颜色 */
        color: dodgerblue;
        /* 你可以添加其他鼠标悬浮时的样式效果 */
        /*text-decoration: underline;*/
    }
</style>